<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原子魔方 - 桌面卡片服务</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'HarmonyOS Sans', '微软雅黑', Arial, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      color: #333;
      overflow-x: hidden;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    .header {
      text-align: center;
      margin-bottom: 40px;
      color: white;
    }

    .header h1 {
      font-size: 2.5rem;
      margin-bottom: 10px;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    .header p {
      font-size: 1.1rem;
      opacity: 0.9;
    }

    .cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
      margin-bottom: 40px;
    }

    .card {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      padding: 25px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    }

    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #667eea, #764ba2);
    }

    .card-title {
      font-size: 1.3rem;
      font-weight: bold;
      margin-bottom: 15px;
      color: #333;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .quote-card {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }

    .quote-text {
      font-size: 1.1rem;
      line-height: 1.6;
      margin-bottom: 20px;
      font-style: italic;
    }

    .quote-meta {
      display: flex;
      justify-content: space-between;
      font-size: 0.9rem;
      opacity: 0.8;
    }

    .refresh-btn {
      background: rgba(255,255,255,0.2);
      border: none;
      color: white;
      padding: 8px 16px;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.3s;
    }

    .refresh-btn:hover {
      background: rgba(255,255,255,0.3);
    }

    .progress-card {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      color: white;
    }

    .progress-bar {
      width: 100%;
      height: 12px;
      background: rgba(255,255,255,0.3);
      border-radius: 6px;
      overflow: hidden;
      margin: 15px 0;
    }

    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #fff, #f0f0f0);
      border-radius: 6px;
      transition: width 1s ease;
      animation: progressAnimation 2s ease-in-out infinite alternate;
    }

    @keyframes progressAnimation {
      0% { width: 65%; }
      100% { width: 70%; }
    }

    .progress-info {
      display: flex;
      justify-content: space-between;
      font-size: 0.9rem;
    }

    .pet-card {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      color: white;
      text-align: center;
    }

    .pet-container {
      width: 120px;
      height: 120px;
      margin: 20px auto;
      background: rgba(255,255,255,0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3rem;
      cursor: pointer;
      transition: all 0.3s;
      position: relative;
    }

    .pet-container:hover {
      transform: scale(1.1);
      background: rgba(255,255,255,0.3);
    }

    .pet-particles {
      position: absolute;
      pointer-events: none;
    }

    .particle {
      position: absolute;
      font-size: 1rem;
      animation: particleFloat 1s ease-out forwards;
    }

    @keyframes particleFloat {
      0% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      100% {
        opacity: 0;
        transform: translateY(-50px) scale(0.5);
      }
    }

    .pet-stats {
      display: flex;
      justify-content: space-around;
      margin-top: 15px;
      font-size: 0.9rem;
    }

    .function-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      margin-top: 20px;
    }

    .function-item {
      background: rgba(255,255,255,0.1);
      border-radius: 15px;
      padding: 20px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;
      border: 2px solid transparent;
    }

    .function-item:hover {
      background: rgba(255,255,255,0.2);
      border-color: rgba(255,255,255,0.3);
      transform: scale(1.05);
    }

    .function-icon {
      font-size: 2rem;
      margin-bottom: 10px;
    }

    .function-title {
      font-size: 0.9rem;
      font-weight: 500;
    }

    .easter-egg-card {
      background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      color: white;
      text-align: center;
    }

    .easter-egg-content {
      padding: 20px;
      cursor: pointer;
      transition: all 0.3s;
    }

    .easter-egg-content:hover {
      transform: scale(1.02);
    }

    .achievement-badge {
      display: inline-block;
      background: rgba(255,255,255,0.2);
      padding: 8px 16px;
      border-radius: 20px;
      margin: 10px 5px;
      font-size: 0.8rem;
    }

    .floating-elements {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .floating-element {
      position: absolute;
      font-size: 1.5rem;
      opacity: 0.1;
      animation: float 6s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(180deg); }
    }

    .theme-toggle {
      position: fixed;
      top: 20px;
      right: 20px;
      background: rgba(255,255,255,0.2);
      border: none;
      color: white;
      padding: 10px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 1.2rem;
      backdrop-filter: blur(10px);
      transition: all 0.3s;
    }

    .theme-toggle:hover {
      background: rgba(255,255,255,0.3);
      transform: scale(1.1);
    }

    .dark-theme {
      background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    }

    .dark-theme .card {
      background: rgba(44, 62, 80, 0.95);
      color: white;
    }

    .dark-theme .card-title {
      color: white;
    }

    .notification {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255,255,255,0.95);
      color: #333;
      padding: 15px 25px;
      border-radius: 25px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
      z-index: 1000;
      opacity: 0;
      transition: opacity 0.3s;
    }

    .notification.show {
      opacity: 1;
    }

    @media (max-width: 768px) {
      .container {
        padding: 15px;
      }
      
      .header h1 {
        font-size: 2rem;
      }
      
      .cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      
      .function-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div class="floating-elements">
    <div class="floating-element" style="top: 10%; left: 10%; animation-delay: 0s;">🌟</div>
    <div class="floating-element" style="top: 20%; right: 15%; animation-delay: 1s;">✨</div>
    <div class="floating-element" style="top: 60%; left: 5%; animation-delay: 2s;">💫</div>
    <div class="floating-element" style="top: 80%; right: 10%; animation-delay: 3s;">⭐</div>
    <div class="floating-element" style="top: 40%; left: 80%; animation-delay: 4s;">🎈</div>
  </div>

  <button class="theme-toggle" onclick="toggleTheme()">🌙</button>

  <div class="container">
    <div class="header">
      <h1>🧊 原子魔方</h1>
      <p>桌面卡片服务 · 趣味互动体验</p>
    </div>

    <div class="cards-grid">
      <!-- 今日一言卡片 -->
      <div class="card quote-card">
        <div class="card-title">
          🌟 今日一言
          <button class="refresh-btn" onclick="refreshQuote()">🔄</button>
        </div>
        <div class="quote-text" id="quoteText">
          生活就像一盒巧克力，你永远不知道下一颗是什么味道
        </div>
        <div class="quote-meta">
          <span>📅 2024年1月15日</span>
          <span>💫 第 365 天</span>
        </div>
      </div>

      <!-- 摸鱼进度条卡片 -->
      <div class="card progress-card">
        <div class="card-title">⏳ 摸鱼进度条</div>
        <div class="progress-info">
          <span>🎯 目标：完成今日任务</span>
          <span id="progressPercent">65%</span>
        </div>
        <div class="progress-bar">
          <div class="progress-fill" id="progressFill"></div>
        </div>
        <div class="progress-info">
          <span>⏰ 剩余 3 小时</span>
          <span>📊 已完成 13/20</span>
        </div>
      </div>

      <!-- 桌面宠物卡片 -->
      <div class="card pet-card">
        <div class="card-title">🐾 桌面宠物</div>
        <div class="pet-container" onclick="interactWithPet()" id="petContainer">
          😊
        </div>
        <div class="pet-stats">
          <span>心情：开心</span>
          <span>等级：Lv.5</span>
        </div>
      </div>

      <!-- 功能入口卡片 -->
      <div class="card">
        <div class="card-title">🎨 功能入口</div>
        <div class="function-grid">
          <div class="function-item" onclick="openFunction('pixel')">
            <div class="function-icon">🎭</div>
            <div class="function-title">像素头像</div>
          </div>
          <div class="function-item" onclick="openFunction('workshop')">
            <div class="function-icon">🛠️</div>
            <div class="function-title">创意工坊</div>
          </div>
          <div class="function-item" onclick="openFunction('collection')">
            <div class="function-icon">📁</div>
            <div class="function-title">收藏夹</div>
          </div>
          <div class="function-item" onclick="openFunction('settings')">
            <div class="function-icon">⚙️</div>
            <div class="function-title">设置</div>
          </div>
        </div>
      </div>

      <!-- 彩蛋卡片 -->
      <div class="card easter-egg-card">
        <div class="easter-egg-content" onclick="triggerEasterEgg()">
          <div class="card-title">🎁 隐藏彩蛋</div>
          <p>点击任意位置发现惊喜！</p>
          <div class="achievement-badge">🎯 已发现：3/10</div>
          <div class="achievement-badge">🏆 成就：初级探索者</div>
        </div>
      </div>
    </div>
  </div>

  <div class="notification" id="notification"></div>

  <script>
    // 今日一言数据
    const quotes = [
      '生活就像一盒巧克力，你永远不知道下一颗是什么味道',
      '每一个不曾起舞的日子，都是对生命的辜负',
      '时间是最好的老师，但遗憾的是，它杀死了所有的学生',
      '人生没有彩排，每一天都是现场直播',
      '与其用华丽的外衣装饰自己，不如用知识充实自己',
      '成功不是将来才有的，而是从决定去做的那一刻起，持续累积而成',
      '没有人能回到过去重新开始，但谁都可以从现在开始，书写一个全然不同的结局',
      '生活不是等待暴风雨过去，而是学会在雨中翩翩起舞',
      '梦想不会逃跑，会逃跑的永远是自己',
      '当你足够努力的时候，幸运总会与你不期而遇'
    ];

    // 宠物心情
    const petMoods = ['😊', '😄', '🤗', '😍', '🥰', '🤩', '😎', '🤠', '👻', '🤖'];

    // 初始化
    let currentProgress = 65;
    let discoveredEasterEggs = 3;
    let isDarkTheme = false;

    // 刷新今日一言
    function refreshQuote() {
      const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
      document.getElementById('quoteText').textContent = randomQuote;
      showNotification('✨ 今日一言已刷新！');
    }

    // 与宠物互动
    function interactWithPet() {
      const petContainer = document.getElementById('petContainer');
      const randomMood = petMoods[Math.floor(Math.random() * petMoods.length)];
      petContainer.textContent = randomMood;
      
      // 创建粒子效果
      createParticles(petContainer);
      
      showNotification('🐾 宠物心情变好了！');
    }

    // 创建粒子效果
    function createParticles(container) {
      const rect = container.getBoundingClientRect();
      const centerX = rect.left + rect.width / 2;
      const centerY = rect.top + rect.height / 2;

      for (let i = 0; i < 8; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        particle.textContent = '✨';
        particle.style.left = centerX + 'px';
        particle.style.top = centerY + 'px';
        particle.style.animationDelay = i * 0.1 + 's';
        
        document.body.appendChild(particle);
        
        setTimeout(() => {
          particle.remove();
        }, 1000);
      }
    }

    // 打开功能
    function openFunction(type) {
      const functions = {
        pixel: '像素头像创作器',
        workshop: '创意工坊',
        collection: '收藏夹',
        settings: '设置面板'
      };
      
      showNotification(`🚀 正在打开${functions[type]}...`);
    }

    // 触发彩蛋
    function triggerEasterEgg() {
      discoveredEasterEggs++;
      showNotification(`🎉 发现新彩蛋！已发现 ${discoveredEasterEggs}/10`);
      
      // 创建更多粒子效果
      const card = event.currentTarget;
      const rect = card.getBoundingClientRect();
      
      for (let i = 0; i < 15; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        particle.textContent = ['🌟', '✨', '💫', '⭐', '🎈'][Math.floor(Math.random() * 5)];
        particle.style.left = (rect.left + Math.random() * rect.width) + 'px';
        particle.style.top = (rect.top + Math.random() * rect.height) + 'px';
        particle.style.animationDelay = i * 0.05 + 's';
        
        document.body.appendChild(particle);
        
        setTimeout(() => {
          particle.remove();
        }, 1500);
      }
    }

    // 切换主题
    function toggleTheme() {
      isDarkTheme = !isDarkTheme;
      document.body.classList.toggle('dark-theme');
      
      const themeBtn = document.querySelector('.theme-toggle');
      themeBtn.textContent = isDarkTheme ? '☀️' : '🌙';
      
      showNotification(isDarkTheme ? '🌙 已切换到暗色主题' : '☀️ 已切换到亮色主题');
    }

    // 显示通知
    function showNotification(message) {
      const notification = document.getElementById('notification');
      notification.textContent = message;
      notification.classList.add('show');
      
      setTimeout(() => {
        notification.classList.remove('show');
      }, 3000);
    }

    // 进度条动画
    function updateProgress() {
      const progressFill = document.getElementById('progressFill');
      const progressPercent = document.getElementById('progressPercent');
      
      setInterval(() => {
        currentProgress += Math.random() * 2 - 1;
        currentProgress = Math.max(0, Math.min(100, currentProgress));
        
        progressFill.style.width = currentProgress + '%';
        progressPercent.textContent = Math.round(currentProgress) + '%';
      }, 3000);
    }

    // 页面加载完成后的初始化
    document.addEventListener('DOMContentLoaded', function() {
      updateProgress();
      
      // 随机初始化今日一言
      refreshQuote();
      
      // 添加卡片点击动画
      document.querySelectorAll('.card').forEach(card => {
        card.addEventListener('click', function(e) {
          if (!e.target.closest('.refresh-btn') && !e.target.closest('.function-item') && !e.target.closest('.easter-egg-content') && !e.target.closest('.pet-container')) {
            this.style.transform = 'scale(0.98)';
            setTimeout(() => {
              this.style.transform = '';
            }, 150);
          }
        });
      });
    });

    // 键盘快捷键
    document.addEventListener('keydown', function(e) {
      switch(e.key) {
        case 'r':
        case 'R':
          if (e.ctrlKey) {
            e.preventDefault();
            refreshQuote();
          }
          break;
        case 't':
        case 'T':
          if (e.ctrlKey) {
            e.preventDefault();
            toggleTheme();
          }
          break;
        case ' ':
          e.preventDefault();
          triggerEasterEgg();
          break;
      }
    });
  </script>
</body>
</html> 